<template>
    <el-container class="mev-div-border" style="color: white">
        <el-header style="height: 15px;text-align: left;margin-top: 8px;font-size: large">
            路径分析
        </el-header>
        <el-main>
            <el-row>
                <el-select size="small" style="width: 100%" v-model="selectedValue" placeholder="选择数据">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-row>
            <el-row>
                <el-button @click="start" size="medium">选点</el-button>
            </el-row>
            <el-row>
                <el-button @click="exec" size="medium">计算</el-button>
            </el-row>
            <el-row>
                <el-button @click="clear" size="medium">清除</el-button>
            </el-row>
            <el-row>
                <el-button @click="close" size="medium">退出</el-button>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
import ShortestPath from "../../../plugins/mev/shortestpath/shortest_path.js";
//import GPSHandler from "../../plugins/mev/gps/gps_handler";
export default {
    name: "PathCompontent",
    data() {
        return {
            sp: null,
            options: [],
            selectedValue: ""
        };
    },
    mounted() {
        this.sp = new ShortestPath();
        let ls = this.sp.layers;
        let that = this;
        if (ls && ls.length > 0) {
            that.options = [];
            ls.forEach(function(layer) {
                that.options.push({
                    label: layer.cesiumTreeData._data.name,
                    value: layer.cesiumTreeData._data.path
                });
            });
        }
    },
    beforeDestroy() {
        if (this.sp) {
            this.sp.close();
            this.sp = null;
        }
    },
    methods: {
        start: function() {
            this.sp.selectedLayer = this.selectedValue;
            let err = this.sp.start();
            if (err) {
                this.$message(err);
            }
        },
        exec: function() {
            if (this.sp) {
                var res = this.sp.exec();
                if (res) {
                    this.$message(res);
                }
            }
        },
        clear: function() {
            if (this.sp) {
                this.sp.clear();
            }
        },
        close: function() {
            if (this.$route.name !== "EmptyComponent") {
                this.$router.push({ name: "EmptyComponent" });
            }
        }
    }
};
</script>

<style scoped>
.el-row {
    margin-top: 10px;
    vertical-align: middle;
}
.el-button {
    width: 100%;
}
.el-divider {
    background-color: #3e4246;
}
</style>
